<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>v-model 实例化</title>
	</head>

	<body>
		<div id="app">
			<h3>v-model 双向绑定实例化</h3>
			<hr />
			<h4>双向绑定一个值</h4>
			<span>{{content}}</span><br /> v-model：
			<input type="text" v-model="content" /><br /> v-model.lazy : <input type="text" v-model.lazy="content" /><br />
			<strong style="color: red;">当input失去焦点时，所编辑的值才会显示在span标签里面，不同于v-model的监听</strong><br /> v-model.number : <input type="text" v-model.number="content" /><br />
			<strong style="color: red;">当先输入string后输入数字时，两者并存；先输入数字后输入string时，string自动忽略</strong><br /> v-model.trim : <input type="text" v-model.trim="content" /><br />
			<strong style="color: red;">去除input输入框中的空格！</strong>
			<h4>绑定数组</h4>
			<select name="" v-model="selected">
				<option :value="item.num" v-for='item in options'>{{item.name}}</option>
			</select>选中的水果：<span>{{selected}}</span>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello World !',
					content: 'Vue.js !',
					selected: '0',
					options: [{
						num: 0,
						name: '请选择'
					},{
						num: 1,
						name: '橘子'
					},
					{
						num: 2,
						name: '苹果'
					},
					{
						num: 3,
						name: '香蕉'
					},
					{
						num: 4,
						name: '榴莲'
					}]
				}
			})
		</script>
	</body>

</html>